<template>
    <div id="vditor" style="width: 600px;height: 80vh;background-color:cornsilk;"></div>
</template>

<script setup lang="ts">
import { onMounted, watch } from 'vue';
import Vditor from 'vditor';

const props = defineProps({
    content: String,
})

const fetchArticleContent = async (content: string) => {
    console.log("更新博客内容", content)
    Vditor.preview(document.getElementById('vditor') as HTMLDivElement, content, {
        mode: "light"
    })
}

// 组件挂载后初始化 Vditor
onMounted(async () => {
    fetchArticleContent(props.content);
});

// 监听参数变化（当在同一个组件内跳转不同ID时）
watch(() => props.content, (newContent) => {
    console.log('Content变化:', props.content, newContent)
    fetchArticleContent(newContent)
})
</script>

<style scoped>
/* 深度选择器穿透 */
.vditor-sv.vditor-reset {
    display: none;
}
</style>